<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button-group>
        <el-button type="primary" v-auth="'MENU_ADD'" icon="plus" @click="handleAdd">添加</el-button>
        <el-button type="primary" v-auth="'MENU_EDIT'" icon="edit" @click="handleEdit" :disabled="currentId === -1">编辑</el-button>
        <el-button type="primary" v-auth="'MENU_DEL'" icon="delete" @click="handleDel" :disabled="currentId === -1">删除</el-button>
      </el-button-group>
    </div>

    <el-row>
      <el-col :span="8" style='margin-top:15px;'>
        <el-tree
          class="filter-tree"
          node-key="id"
          ref="menuTree"
          highlight-current
          auto-expand-parent
          check-strictly
          :expand-on-click-node="false"
          :data="treeData"
          :default-expanded-keys="defaultExpandedKeys"
          @node-click="getNodeData">
        </el-tree>
      </el-col>
      <el-col :span="16" style='margin-top:15px;'>
        <el-card class="box-card">
          <el-form label-width="80px" :model="form" ref="form" :rules="rules">
            <el-form-item label="父级节点" prop="parentId">
              <el-input v-model="form.parentId" :disabled="true" placeholder="请输入父级节点"></el-input>
            </el-form-item>
            <el-form-item label="节点ID" v-show="formEdit" prop="id">
              <el-input v-model="form.id" :disabled="true" placeholder="当前节点的ID"></el-input>
            </el-form-item>
            <el-form-item label="标题" prop="menuName">
              <el-input v-model="form.menuName" :disabled="formEdit" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="mediaInfo">
              <el-input v-model="form.mediaInfo" :disabled="formEdit" placeholder="请输入描述"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="menuType">
              <el-select class="filter-item" clearable :disabled="formEdit" v-model.number="form.menuType" placeholder="请输入资源请求类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item"
                  :label="item | typeFilter"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="权限标识" prop="frontToolName">
              <el-input v-model="form.frontToolName" :disabled="formEdit" placeholder="请输入权限标识"></el-input>
            </el-form-item>
            <el-form-item label="请求方式" prop="requestMethod">
              <el-select v-model="form.requestMethod" clearable placeholder="请选择" :disabled="formEdit">
                <el-option
                  v-for="item in requestMethods"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请求路径" prop="requestPath">
              <el-input v-model="form.requestPath" :disabled="formEdit" placeholder="请输入请求路径"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model.number="form.sort" type="number" :disabled="formEdit" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item v-if="formStatus == 'update'">
              <el-button type="primary" v-auth="'MENU_EDIT'" @click="update">更新</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
            <el-form-item v-if="formStatus == 'create'">
              <el-button type="primary" v-auth="'MENU_ADD'" @click="create">保存</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
export default {
  data () {
    const frontToolNameValidate = (rule, value, callback) => {
      if (this.form.menuType === 3) {
        callback()
        return
      }
      if (typeof this.form.menuType === 'number' && value == null) {
        callback(new Error('请填写用户权限标识'))
      } else {
        callback()
      }
    }
    return {
      treeData: [],
      form: {
        parentId: undefined,
        id: undefined,
        menuName: undefined,
        mediaInfo: undefined,
        menuType: undefined,
        frontToolName: undefined,
        requestMethod: undefined,
        requestPath: undefined,
        sort: undefined
      },
      typeOptions: [0, 1, 3],
      formStatus: '',
      formEdit: true,
      currentId: -1,
      requestMethods: ['GET', 'POST', 'PUT', 'DELETE'],
      rules: {
        menuName: [{required: true, message: '标题不能为空', trigger: 'blur'}],
        menuType: [{required: true, message: '类型不能为空'}],
        frontToolName: [{validator: frontToolNameValidate, trigger: 'blur'}]
      },
      defaultExpandedKeys: []
    }
  },
  created () {
    this.getMenu()
  },
  methods: {
    getMenu () {
      this.myGet('/uc/menu').then(data => {
        this.treeData = this.transMenuData(data)
        if (this.currentId !== -1) {
          // 添加/修改
          this.$nextTick(() => {
            this.$refs.menuTree.setCurrentKey(this.currentId)
            this.formEdit = true
            this.formStatus = ''
            this.$nextTick(() => {
              const node = this.$refs.menuTree.getCurrentNode()
              this.form = {...node}
            })
          })
        } else {
          // 初始/删除
          this.resetform()
        }
        this.defaultExpandedKeys = this.treeData.map(item => item.id).concat([this.currentId])
      })
    },
    handleAdd () {
      this.resetform()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleEdit () {
      if (this.currentId !== -1) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handleDel () {
      this.currentId = -1
      this.$confirm('此操作将删除该权限菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => this.myPut('/uc/menu', {...this.form, status: -1}))
      .then(res => this.getMenu())
      .catch(e => {
        if (e === 'cancel') {
          return
        }
        this.$message.error(e.message)
      })
    },
    update () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.myPut('/uc/menu', this.form).then(res => {
          this.getMenu()
        })
      })
    },
    onCancel () {
      this.formEdit = true
      this.formStatus = ''
    },
    create () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.myPost('/uc/menu', this.form).then(res => {
          this.currentId = res.data.id
          this.getMenu()
        })
      })
    },
    getNodeData (data) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      this.currentId = data.id
      this.form = data
    },
    transMenuData (data) {
      if (!data) {
        return
      }
      if (Array.isArray(data)) {
        return data.map(node => {
          return {
            ...node,
            // id: node.myNode,
            label: node.menuName,
            children: this.transMenuData(node.children)
          }
        })
      }
    },
    resetform () {
      this.form = {
        parentId: this.currentId,
        id: undefined,
        menuName: undefined,
        mediaInfo: undefined,
        menuType: undefined,
        frontToolName: undefined,
        requestMethod: undefined,
        requestPath: undefined,
        sort: undefined
      }
    }
  },
  filters: {
    typeFilter(type) {
      const typeMap = {
        0: '菜单',
        1: '组件',
        3: '组别'
      }
      return typeMap[type]
    }
  }
}
</script>


<style scoped>
  .filter-container {
    margin: 20px;
  }
</style>
